<script setup>
import { ref, onMounted, watch } from 'vue';
import { Button, cellGroupProps } from 'vant';
import { useRouter } from 'vue-router'
import { getActivityList, getActivityList1,addListAll } from '@/api/activity'
import { showToast } from 'vant';


const time = ref('')
const color = ref('black')
const router = useRouter()
const desc = ref('')
const title = ref('')
const thumb = ref('')
const activityList = ref([])
const index = ref(0)
const index1 = ref(null)
const active = ref(1)
const like = ref(null)
const page = ref(1)
const id = ref(0)
const newObj = ref({})

/**
* 获取当前时间
*/
function currentTime() {
    var date = new Date();
    var year = date.getFullYear(); //月份从0~11，所以加一
    let month = date.getMonth();
    var dateArr = [
        date.getMonth() + 1,
        date.getDate(),
        date.getHours(),
        date.getMinutes(),
        date.getSeconds(),
    ];
    //如果格式是MM则需要此步骤，如果是M格式则此循环注释掉
    for (var i = 0; i < dateArr.length; i++) {
        if (dateArr[i] >= 1 && dateArr[i] <= 9) {
            dateArr[i] = "0" + dateArr[i];
        }
    }
    var strDate = year + "/" + dateArr[0] + "/" + dateArr[1] + " "
    return strDate

}
//点击care跳转页面
function change() {
    // console.log('点我了');
    router.push('/alllist')
}

function add(e,item) {
    if ( !item.dian) {
        e.target.style.color = 'red'
        //点击爱心 提示我喜欢
        showToast({
            message: '已加入',
            icon: 'cart-circle-o',
        });
        item.dian = !item.dian
        //点击加入购物车，更改allList页面数据
        // newObj.value=item
        addListAll(item).then(res =>{
            console.log('添加完毕后的数组', res.data);
        })

    } else {
        item.dian= !item.dain;
        e.target.style.color = 'black'
        showToast({
            message: '已取消',
            icon: 'flower-o',
        });
    }
}
//watch
watch(index, () => {
    index1.value.forEach(item => {
        item.style.backgroundColor = "white"
    })
    index1.value[index.value - 1].style.backgroundColor = "orange"

}
),

    watch(page, () => {
        getActivityList(page).then(res => {
            console.log(res.data);
            activityList.value = res.data.data
         
        })

    },)
//点击获取active，改变背景颜色
function changeBg(i) {
    index.value = i
    page.value = i
    getActivityList1(page).then(res => {
        // console.log(res.data);
        activityList.value = res.data.data
    })
    // console.log(page.value);
}

//点击跳转详情页

getActivityList(page).then(res => {
    // console.log(res.data);
    activityList.value = res.data.data
})
onMounted(() => {
    time.value = currentTime()
    index1.value[index.value].style.backgroundColor = "orange"
})
</script>
<template>
    <div class="box">
        <p class="header">
            <b>{{ time }}</b>
        <span class="care" @click="change">我的订单</span>
        </p>
        
    <div class="content">
        <div class="title">
            <div>一</div>
            <div>二</div>
            <div>三</div>
            <div>四</div>
            <div>五</div>
            <div>六</div>
            <div>日</div>
        </div>
        <div class="title1">
            <div ref="index1" v-for="item in 7" :key="item" @click="changeBg(item)">
                {{ item }}
                <span>活动</span>
            </div>

        </div>
        <div class="cardlist">
            <van-card v-for="item in activityList"  :key="item.id" :desc=item.desc :title=item.title
                :thumb=item.img>
                <template #tag>
                    <van-icon name="shopping-cart-o"  :color="color" size="35" class="xin" @click="add($event,item)" />
                </template>
            </van-card>
        </div>
    </div>
</div>
</template>
<style lang="scss" scoped>
.header{
    height: 50px;
  display: flex;
  justify-content: space-around;
  align-items: center;
}
    .care {
        float: right;
        font-size: 20px;
    }


.content {
    overflow: auto;

    .title {
        display: flex;
        justify-content: space-evenly;
        text-align: center;
        margin: 10px 0;
    }

    .title1 {
        display: flex;
        justify-content: space-evenly;

        div {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            width: 40px;
            height: 40px;
            border-radius: 5px;
            text-align: center;
        }



    }

    .cardlist {
        .van-card {
            margin: 5px auto;
            width: 95%;
            border-radius: 10px;
            position: relative;
            
            .xin {
                z-index:99;
                position: absolute;
                left: 3rem;
                top: .3rem;

            }
        }




    }

}
</style>